<template>
    <div class="login-container">
        <!-- 登录卡片 -->
        <el-card class="login-card" shadow="hover">
            <template #header>
                <div class="login-header">
                    <el-icon class="header-icon">
                        <Book />
                    </el-icon>
                    <h2>图书馆管理系统</h2>
                    <p class="header-desc">请使用您的账号登录</p>
                </div>
            </template>

            <!-- 登录表单 -->
            <el-form
                ref="loginForm"
                :model="form"
                :rules="rules"
                label-width="80px"
                class="login-form"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input
                        v-model="form.username"
                        placeholder="请输入用户名"
                        prefix-icon="User"
                        :disabled="loading"
                    />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="form.password"
                        type="password"
                        placeholder="请输入密码"
                        prefix-icon="Lock"
                        :disabled="loading"
                        show-password
                    />
                </el-form-item>
                <el-form-item class="form-actions">
                    <el-button
                        type="primary"
                        @click="handleLogin"
                        class="login-btn"
                        :loading="loading"
                    >
                        登录系统
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 底部信息 -->
            <div class="login-footer">
                <p>默认账号：admin 密码：admin123</p>
            </div>
        </el-card>
    </div>
</template>

<script>
// 导入需要的图标
const { Book, User, Lock } = ElementPlusIconsVue;

module.exports = {
    data() {
        return {
            // 登录表单数据
            form: {
                username: '',
                password: ''
            },
            // 表单验证规则
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '用户名长度在 3-20 个字符之间', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
                ]
            },
            // 登录状态（加载中）
            loading: false
        };
    },
    components: {
        Book,
        User,
        Lock
    },
    methods: {
        /**
         * 处理登录逻辑
         */
        async handleLogin() {
            // 1. 表单验证
            try {
                await this.$refs.loginForm.validate();
            } catch (error) {
                // 验证失败
                this.$message.warning('请完善登录信息');
                return;
            }

            // 2. 发起登录请求
            this.loading = true;
            try {
                // 调用后端登录接口
                const response = await this.$axios.post('/auth/login', this.form);

                // 3. 登录成功处理
                if (response.code === 0) {
                    // 保存Token和用户信息到本地存储
                    localStorage.setItem('library_token', response.data.token);
                    localStorage.setItem('library_user', JSON.stringify(response.data.user));

                    this.$message.success('登录成功，正在进入系统...');

                    // 延迟跳转，让用户看到提示
                    setTimeout(() => {
                        this.$router.push('/home');
                    }, 800);
                } else {
                    this.$message.error(response.message || '登录失败');
                }
            } catch (error) {
                // 网络错误或服务器异常
                this.$message.error('登录失败：' + (error.response?.data?.message || '网络异常'));
            } finally {
                // 无论成功失败，都结束加载状态
                this.loading = false;
            }
        }
    },
    mounted() {
        // 页面加载时，如果有记住的账号密码可以自动填充（这里简化处理）
        // 实际项目中可以从localStorage读取
        this.form.username = 'admin';
    }
};
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 8px;
    overflow: hidden;
}

.login-header {
    text-align: center;
    padding: 10px 0;
}

.header-icon {
    font-size: 40px;
    color: #409eff;
    margin-bottom: 15px;
}

.header-desc {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
}

.login-form {
    padding: 0 20px 20px;
}

.form-actions {
    margin-top: 15px;
}

.login-btn {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
}

.login-footer {
    text-align: center;
    font-size: 12px;
    color: #999;
    padding: 10px 0;
    border-top: 1px solid #eee;
    margin-top: 10px;
}
</style>
